<template>
	<view>
		<cmd-page-body type="top">
			<cmd-transition name="fade-up">
				<view>
					<cmd-cel-item title="头像" slot-right arrow @click="toEdit"><cmd-avatar :src="user.userHeadPortrait"></cmd-avatar></cmd-cel-item>
					<cmd-cel-item title="昵称" :addon="user.userNikename" arrow @click="toEdit"></cmd-cel-item>
					<cmd-cel-item title="性别" :addon="sex[user.userSex]" arrow @click="toEdit"></cmd-cel-item>
					<cmd-cel-item title="联系方式" :addon="user.userMobile" arrow @click="toEdit"></cmd-cel-item>
					<cmd-cel-item title="邮箱" :addon="user.userEmail" arrow @click="toEdit"></cmd-cel-item>
					<button class="btn-logout" @click="logout">退出登录</button>
				</view>
			</cmd-transition>
		</cmd-page-body>
	</view>
</template>

<script>
import cmdNavBar from '@/components/cmd-nav-bar/cmd-nav-bar.vue';
import cmdPageBody from '@/components/cmd-page-body/cmd-page-body.vue';
import cmdTransition from '@/components/cmd-transition/cmd-transition.vue';
import cmdCelItem from '@/components/cmd-cell-item/cmd-cell-item.vue';
import cmdIcon from '@/components/cmd-icon/cmd-icon.vue'
import cmdAvatar from '@/components/cmd-avatar/cmd-avatar.vue';
import { mapMutations } from 'vuex';
export default {
	components: {
		cmdNavBar,
		cmdPageBody,
		cmdTransition,
		cmdCelItem,
		cmdAvatar,
		cmdIcon
	},

	data() {
		return {
			user: {},
			sex: ['男', '女']
		};
	},
	onShow() {
		this.user = this.$store.state.userInfo;
	},

	methods: {
		...mapMutations(['logout']),
		toEdit() {
			uni.navigateTo({
				url: '/pages/user/edit'
			});
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
.btn-logout {
	margin-top: 100upx;
	width: 80%;
	border-radius: 50upx;
	font-size: 16px;
	color: #fff;
	background: linear-gradient(to right, #365fff, #36bbff);
}

.btn-logout-hover {
	background: linear-gradient(to right, #365fdd, #36bbfa);
}
</style>
